<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <title>[[${questionDto.question.questionTitle}]]--问题详情 - 小乖乖问答系统</title>
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/css/publish.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/markdown/editormd.preview.min.css"/>
    <script src="/js/jquery-3.4.1.js" type="application/javascript"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/layer/layer.js" type="application/javascript"></script>
    <script src="/js/markdown/editormd.min.js" type="application/javascript"></script>
    <script src="/js/markdown/lib/marked.min.js" type="application/javascript"></script>
    <script src="/js/markdown/lib/prettify.min.js" type="application/javascript"></script>
    <style>
        .menu {
            color: #999;
            margin-top: 5px;
        }

        .menu .icon {
            margin-right: 15px;
            font-size: 15px;
            cursor: pointer;
        }

        .active {
            color: #499ef3;
        }

        .menu .icon:hover {
            color: #499ef3;
        }

        .comments {
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 1px solid #eee;
        }

        .nextComment {
            margin-top: 15px;
            border: 1px solid #eee;
            padding-top: 15px;
            border-radius: 5px;
            margin-bottom: 15px;
        }
    </style>
</head>
<body class="main-img">
<nav th:insert="~{common/head :: comment_header}"></nav>
<div class="container-fluid main">
    <div class="row">
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3>
                    <span class="glyphicon glyphicon-education" aria-hidden="true"></span>&nbsp;
                    [[${questionDto.question.questionTitle}]]
                </h3>
                <hr/>
                <span class="text-desc">
                   <span>小乖乖问答系统</span>&emsp;|
                    &emsp;作者：<span>[[${questionDto.user.name}]]</span>&emsp;|
                   &emsp;阅读数：<span th:text="${questionDto.question.viewCount}"></span>&emsp;|
                   &emsp;发布时间：<span th:text="${#dates.format(questionDto.question.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}">1个小时前</span>
                </span>
                <hr/>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="question-view">
                    <textarea style="display: none;" th:text="${questionDto.question.description}"></textarea>
                </div>
                <hr class="col-lg-12 col-md-12 col-sm-12 col-xs-12"/>
                <script type="text/javascript">
                    $(function () {
                        var testView = editormd.markdownToHTML("question-view", {});
                    });
                </script>

                <!--                标签-->
                <span class="label label-info" style="font-size: 15px;margin-right: 10px;"
                      th:each="tag : ${questionDto.question.tag.split(',')}">
                    <span class="glyphicon glyphicon-tags"></span>
                    <span class="label label-info" th:text="${tag}"></span>
                </span>
                <hr/>
                <a th:if="${session.user != null && session.user.id eq questionDto.user.id}"
                   th:href="@{'/publish/'+${questionDto.question.id}}" class="amenu" style="text-decoration: none">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                    编辑
                </a>
                <hr th:if="${session.user != null && session.user.id eq questionDto.user.id}"/>
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3 style="margin-left: 5px;">
                    <span>[[${questionDto.question.commentCount}]] 个回复</span>
                </h3>
                <hr style="margin-top: 0;"/>
                <div class="media comments" th:each="comments : ${comments}">
                    <div class="media-left">
                        <a href="#">
                            <img width="50px" height="50px" class="media-object img-rounded"
                                 th:src="@{${comments.user.avatarUrl}}" onerror="this.src='/images/IMG_0044.jpg';">
                        </a>
                    </div>
                    <div class="media-body" th:id="${'comment-body-'+comments.comment.id}">
                        <h5 class="media-heading">
                            <span th:text="${comments.user.name}"></span>
                        </h5>
                        <div th:text="${comments.comment.content}">

                        </div>
                        <div class="menu">
                            <span class="glyphicon glyphicon-thumbs-up icon" aria-hidden="true"></span>

                            <span class="glyphicon glyphicon-comment" aria-hidden="true"
                                  th:data-d="${comments.comment.id}" onclick="callComment(this);"
                                  style="font-size: 15px;">
                                <span th:text="${comments.comment.contentCount}"
                                      style="margin-left: -10px;font-size: 16px;"></span>
                            </span>
                            <span class="pull-right"
                                  th:text="${#dates.format(comments.comment.gmtCreate, 'yyyy-MM-dd')}">1个小时前</span>
                        </div>

                        <!-- 二级评论-->
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse nextComment"
                             th:id="${'comment-'+comments.comment.id}">

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input type="text" class="form-control" placeholder="评论一下吧"
                                       th:id="${'input-'+comments.comment.id}"/>
                                <button style="margin: 10px 0;" type="button" class="btn btn-success pull-right"
                                        onclick="comment(this);"
                                        th:data-id="${comments.comment.id}">评论
                                </button>
                            </div>
                        </div>

                    </div>
                </div>

            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px;">
                <div id="commentSection">
                    <div class="media">
                        <div class="media-left">
                            <a href="#">
                                <img width="50px" height="50px" class="media-object img-rounded"
                                     th:src="@{${session.user != null ? session.user.avatarUrl : '/images/default-user.png'}}"
                                     onerror="this.src='/images/IMG_0044.jpg';">
                            </a>
                        </div>
                        <div class="media-body" style="padding-top: 18px;">
                            <h4 class="media-heading">
                                <span th:text="${session.user != null ? session.user.name : '匿名用户'}"></span>
                            </h4>
                        </div>
                    </div>
                    <input type="hidden" id="questionId" th:value="${questionDto.question.id}">
                    <textarea id="content" class="form-control" rows="8" style="margin: 15px 0 15px 0;"></textarea>
                    <!-- Indicates a successful or positive action -->
                    <button type="button" class="btn btn-success" style="float: right;margin-bottom: 10px;"
                            onclick="sumbit();">回复
                    </button>
                </div>
            </div>
        </div>

        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <h3>发起人</h3>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img width="50px" height="50px" class="media-object img-rounded"
                                 th:src="@{${questionDto.user.avatarUrl}}" onerror="this.src='/images/IMG_0044.jpg';">
                        </a>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">
                            <span th:text="${questionDto.user.name}"></span>
                        </h5>
                    </div>
                    <hr/>
                </div>
            </div>
            <input id="url" th:value="${#httpServletRequest.getRequestURL()}" type="hidden">
            <h3>官方私人微信</h3>
            <img class="col-lg-12 col-md-12 col-sm-12 col-xs-12 img-thumbnail"
                 src="/images/IMG_0142(20200313-125208).JPG">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <hr/>
                <h3>相关问题</h3>
                <ul class="col-lg-12 col-md-12 col-sm-12 col-xs-12"
                    style="list-style: none;padding-left: 0;font-size: 13px;line-height: 20px;">
                    <li th:each="related : ${relatedQuestions}">
                        <a style="cursor: pointer;text-decoration: none;"
                           th:href="@{'/question/'+${related.question.id}}"
                           th:text="${related.question.questionTitle}"></a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
<nav th:insert="~{common/footer :: comment_footer}"></nav>
</body>
<script>
    function sumbit() {
        var questionId = $("#questionId").val();
        var content = $("#content").val();
        commentTarget(questionId, 1, content);
    }

    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        return Y + M + D;
    }

    function callComment(e) {
        var id = e.getAttribute("data-d");
        var comments = $("#comment-" + id);

        var attribute = e.getAttribute("data-collapse");
        if (attribute) {
            comments.removeClass("in");
            e.classList.remove("active");
            e.removeAttribute("data-collapse");
        } else {
            var nextComment = $("#comment-" + id);
            if (nextComment.children().length != 1) {
                //展开二级评论
                comments.addClass("in");
                e.classList.add("active");
                e.setAttribute("data-collapse", "in");
            } else {
                $.getJSON("/comment/" + id, function (data) {
                    for (var i = 0; i < data.data.length; i++) {
                        var html = '<div class="media comments">';
                        html += '<div class="media-left">';
                        html += '<a href="#">';
                        html += '<img width="50px" height="50px" class="media-object img-rounded" src="' + data.data[i].user.avatarUrl + '" onerror="this.src=\'/images/IMG_0044.jpg\';">';
                        html += '</a>';
                        html += '</div>';
                        html += '<div class="media-body" id="comment-body-"+data.data[i].comment.id">';
                        html += '<h5 class="media-heading">';
                        html += '<span th:text="${comments.user.name}">' + data.data[i].user.name + '</span>';
                        html += '</h5>';
                        html += '<div th:text="${comments.comment.content}">' + data.data[i].comment.content + '</div>';
                        html += '<div class="menu">';
                        html += '<span class="pull-right">' + timestampToTime(data.data[i].comment.gmtCreate) + '</span>';
                        html += '</div>';
                        nextComment.prepend(html);
                    }
                    //展开二级评论
                    comments.addClass("in");
                    e.classList.add("active");
                    e.setAttribute("data-collapse", "in");
                });
            }

        }
    }

    function commentTarget(targetId, type, content) {
        var questionId = $("#questionId").val();
        var url = $("#url").val();
        var urle = url.substring(0, url.lastIndexOf("/"));
        var urles = urle.substring(0, urle.lastIndexOf("/"));
        if (content == null || content == '') {
            //提示层
            layer.msg('回复信息为空，禁止提交', {icon: 4});
            return false;
        }
        $.ajax({
            type: "POST",
            url: "/comment",
            data: {
                "parentId": targetId,
                "questionId": questionId,
                "content": content,
                "type": type
            },
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("回复成功", {icon: 1});
                    window.location.reload();
                    $("#commentSection").hide();
                } else {
                    if (data.code == 2002) {
                        //询问框
                        layer.confirm('当前用户未登录，是否登陆？', {
                            btn: ['登陆', '取消'] //按钮
                        }, function () {
                            // layer.msg('前往登录', {icon: 1});
                            window.close();
                            window.open("https://github.com/login/oauth/authorize?client_id=Iv1.d3f81f3d40813f8a&redirect_uri=" + urles + "/callback&scope=user&state=" + questionId);
                        }, function () {
                            layer.msg("取消登陆", {icon: 5});
                        });
                    } else {
                        layer.msg("错误码:" + data.code + "，" + data.message, {icon: 2});
                    }
                }
            },
            error: function (event, XMLHttpRequest, ajaxOptions, thrownError) {
                layer.msg("错误状态" + XMLHttpRequest.status + "错误原因：" + XMLHttpRequest.readyState, {icon: 2});
            }

        });
    }

    function comment(e) {
        var commentId = e.getAttribute("data-id");
        var targetContent = $("#input-" + commentId).val();
        commentTarget(commentId, 2, targetContent);
    }
</script>
</html>